<script setup name="mv-list">
import { formartNum } from '@/utils/util'
import { Right, MoreOne, PlayOne } from '@icon-park/vue-next'
import IconPark from '@/components/common/IconPark.vue'

defineProps({
  mvlist: {
    type: Array
  },
  count: {
    type: Number
  },
  loading: {
    type: Boolean
  }
})
</script>

<template>
  <div class="mv-list">
    <RouterLink :to="{ path: '/mvlist' }" class="more">
      <h3>最新MV</h3>
      <IconPark :icon="Right" theme="filled" :size="5" />
      <IconPark :icon="MoreOne" theme="filled" :size="5" />
    </RouterLink>
    <van-skeleton v-if="loading">
      <template #template>
        <van-skeleton-image v-for="i in 3" :key="i" />
      </template>
    </van-skeleton>
    <van-swipe v-else :show-indicators="false" :width="140" :loop="false">
      <van-swipe-item v-for="item in mvlist" :key="item">
        <RouterLink :to="{ path: '/mvlist/detail', query: { id: item.id } }">
          <div class="icon-slot">
            <span class="playCount">
              <IconPark :icon="PlayOne" theme="filled" :size="3" />
              {{ formartNum(item.playCount) }}
            </span>
            <van-image width="100%" height="100" :src="item.cover" class="song-sheet" />
            <van-text-ellipsis :content="item.name" rows="1" />
            <van-text-ellipsis class="artistName" :content="item.artistName" rows="2" />
          </div>
        </RouterLink>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<style scoped lang="scss">
.mv-list {
  padding: 8px 6px;

  .van-swipe-item {
    .icon-slot {
      font-size: 12px;
      position: relative;

      .artistName {
        font-size: 10px;
        color: #ccc;
      }

      .playCount {
        position: absolute;
        top: 12px;
        right: 4px;
        border-radius: 0 10px 0 0;
        padding: 1px 6px 0 0;
        z-index: 1;
        color: var(--vt-c-white-mute);
      }

      .van-text-ellipsis {
        margin-left: 4px;
      }
    }
  }

  .van-skeleton {
    padding: 0 3px;

    .van-skeleton-image {
      width: 130px;
      height: 130px;
      border-radius: 10px;
      margin-right: 9px;

      &:last-child {
        margin-right: 0;
      }
    }
  }
}
</style>